<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <head-com></head-com>
        <div>
            <head-com />
        </div>
        <foot-com></foot-com>
    </div>
    <hr>
    <div id="con">
        <head-com></head-com>
        <foot-com></foot-com>
    </div>

    <!-- 脚步组件的模板 -->
    <template id="myfoot">
      <div>
          <h1>{{tips}}</h1>
          <head-com></head-com>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        //vue组件（Component）是对数据和方法和模板和样式等的封装
        // 增加代码的复用性
        // Vue.component('组件名',{配置项})
        Vue.component('headCom', {
                template: `<div> <h1>{{list}}</h1> </div>`, //vue组件的模板  模板的内部要有一个div包裹
                data() {
                    return {
                        list: ["男人", "女人", "不是人"]
                    }
                },
                methods: {
                    say() {
                        alert("你好")
                    }
                },
                computed: {},
                watch: {},
                mounted() {},
            })
            // 脚步组件
        Vue.component('footCom', {
                template: "#myfoot",
                data() {
                    return {
                        tips: "今天星期三"
                    }
                }
            })
            // ----------------------------------------
        var app = new Vue({
            el: "#app"
        })
        var con = new Vue({
            el: "#con"
        })
    </script>
</body>

</html>